<template>
	<div>
		<!-- 头部 -->
		<my-title title="医院管理"></my-title>
		
		<div class="flex flex-between items-center pb-2">
			<div class="flex items-center">
				<el-select v-model="value" placeholder="请选择" size="small">
					<el-option v-for="item in options" :key="item.value" :label="item.label"
						:value="item.value">
					</el-option>
				</el-select>
			</div>
			<div class="flex">
				<div class="flex">
					<div class="pr-1">
						<el-input class="w-300" v-model="searchKeyWord" placeholder="姓名/账号" size="small"></el-input>
					</div>
					<el-button size="small"  @click="search">查询</el-button>
					<el-button type="primary" size="small" icon="el-icon-plus" @click="addAccount">添加账号</el-button>
				</div>
			</div>
		</div>
		
		<el-tabs v-model="activeName">
			<!-- 账号管理 -->
			<el-tab-pane label="账号管理" name="accountManagement">
				<Account></Account>
			</el-tab-pane>
			<!-- 默认值管理 -->
			<el-tab-pane label="默认值管理" name="defaultSetting">
				<!-- <div class="flex flex-between items-center pb-2">
					<div class="flex items-center">
						<el-radio-group v-model="cardMode" size="small">
							<el-radio-button label="card">卡片模式</el-radio-button>
							<el-radio-button label="list">列表模式</el-radio-button>
						</el-radio-group>
						<div class="pl-2 font-14">系统科室患者共8人，达标率0%</div>
					</div>
					<div class="flex">
						<div class="flex">
							<div class="pr-1">
								<el-input class="w-300" placeholder="患者姓名/住院号/责任医生" size="small"></el-input>
							</div>
							<el-button size="small">查询</el-button>
							<el-button size="small">条件筛选</el-button>
						</div>
					</div>
				</div> -->
			</el-tab-pane>
		</el-tabs>
		
		<!-- 添加用户信息的弹框 -->
		<el-dialog title="账号添加" :visible.sync="editUserInfoDialogVisible" width="40%">
			<el-form label-position="right" label-width="100px">
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="账号" prop="name" v-model="editUserInfoForm.account"><el-input></el-input></el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="姓名" prop="name"><el-input v-model="editUserInfoForm.username"></el-input></el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="手机" prop="name"><el-input v-model="editUserInfoForm.phone"></el-input></el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="角色" prop="name"><el-input v-model="editUserInfoForm.role"></el-input></el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="状态" prop="name"><el-input v-model="editUserInfoForm.status"></el-input></el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="手写签名" prop="name" v-model="editUserInfoForm.autograph"><el-input></el-input></el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="关联科室" prop="name"><el-input v-model="editUserInfoForm.relationDepartment"></el-input></el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="病区" prop="name"><el-input v-model="editUserInfoForm.relationDepartment"></el-input></el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="虚拟病房" prop="name"><el-input></el-input></el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<div class="text-left">
					<el-button type="primary" @click="editUserInfoDialogVisible = false">提交</el-button>
					<el-button @click="editUserInfoDialogVisible = false">取消</el-button>
				</div>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import Account from './components/Account.vue'
	export default {
		data() {
			return {
				activeName: "accountManagement",
				options: [{
					value: '',
					label: '系统科室'
				}],
				value: '',
				searchKeyWord:'',
				editUserInfoForm: {
					username: '',
					account: '',
					department: '',
					type: '',
					status: ''
				},
				editUserInfoDialogVisible: false
			};
		},
		methods: {
			// 添加账号
			addAccount() {
				this.editUserInfoDialogVisible = true;
			},
			// 点击查询按钮
			search() {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				setTimeout(() => {
					loading.close();
				}, 500);
			}
		},
		components:{
			Account
		}
	};
</script>
